<template>
  <!-- 结算信息table组件 -->
  <div>
    <transition name="el-zoom-in-top">
      <div class="download" v-show="checkboxSelect > 0">
        <i class="el-icon-info"></i>
        共{{ total }}项，已选择<b>{{ checkboxSelect }}</b
        >项
        <span @click="excelDownload">下载</span>
        <em @click="cleanSelection">清空</em>
      </div>
    </transition>
    <el-table
      :data="tableData"
      @selectionChange="downloadWhether"
      stripe
      style="width: 100%"
      @selection-change="handleSelectionChange"
      ref="multipleTable"
      :row-key="getRowKeys"
      @sort-change="sortChange"
    >
      <template v-if="platformId != undefined || bussinessId != undefined">
        <el-table-column width="45"> </el-table-column>
      </template>
      <template v-else>
        <el-table-column type="selection" :reserve-selection="true" width="45"> </el-table-column>
      </template>
      <el-table-column prop="settlementNo" sortable="custom" label="单号" width="150">
      </el-table-column>
      <el-table-column prop="createTime" sortable="custom" label="账单生成时间" width="148">
        <template #default="item">
          {{ format("yyyy-MM-dd hh:mm:ss", new Date(item.row.createTime)) }}
        </template>
      </el-table-column>
      <el-table-column prop="startTime" sortable="custom" label="结算开始时间" width="148">
        <template #default="item">
          {{ format("yyyy-MM-dd hh:mm:ss", new Date(item.row.startTime)) }}
        </template>
      </el-table-column>
      <el-table-column prop="endTime" sortable="custom" label="结算结束时间" width="148">
        <template #default="item">
            <template v-if="item.row.endTime != null">
            {{ format("yyyy-MM-dd hh:mm:ss", new Date(item.row.endTime)) }}
            </template>
            <template v-else>
            --
            </template>
        </template>
      </el-table-column>
      <!-- <el-table-column
        prop="receivedBusinessNum"
        align="center"
        width="120"
        label="接收任务个体户数"
      >
      </el-table-column> -->
      <el-table-column
        prop="finishedBusinessNum"
        align="center"
        width="140"
        label="完成任务个体户数"
        v-if="bussinessId == undefined"
        sortable="custom"
      >
      </el-table-column>
      <el-table-column prop="amount" sortable="custom" width="100" label="交易额">
        <template #default="item">
          {{ formatNumber(item.row.amount) }}
        </template>
      </el-table-column>
      <el-table-column prop="tax" sortable="custom" label="税费">
        <template #default="item">
          {{ formatNumber(item.row.tax) }}
        </template>
      </el-table-column>
      <el-table-column prop="fee" sortable="custom" label="服务费">
        <template #default="item">
          {{ formatNumber(item.row.fee) }}
        </template>
      </el-table-column>
      <el-table-column prop="settlementAmount" sortable="custom" width="100" label="结算额">
        <template #default="item">
          {{ formatNumber(item.row.settlementAmount) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="settlementStatus"
        align="center"
        label="结算状态"
        width="80"
      >
        <template #default="item">
          {{ settlementStatus[item.row.settlementStatus] }}
        </template>
      </el-table-column>
      <el-table-column
        prop="paymentStatuts"
        align="center"
        label="打款状态"
        width="80"
      >
        <template #default="item">
          {{ paymentStatuts[item.row.paymentStatuts] }}
        </template>
      </el-table-column>
      <el-table-column
        prop="caozuo"
        label="操作"
        class-name="editor"
        width="180"
      >
        <template #default="item">
          <router-link
            :to="{
              path: 'settlementDel',
              query: { codeNo: item.row.settlementNo },
            }"
          >
            <el-button type="text">详情</el-button>
          </router-link>
          <template v-if="item.row.paymentStatuts == 2">
            <el-button type="text" @click="settlementService(item.row.settlementNo)"
              >打款回执</el-button
            >
            <el-button type="text" @click="settlementServices(item.row)"
              >打款情况</el-button
            >
          </template>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      v-if="tableData.length > 0"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="arrPage"
      :page-size="selectPage"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <!-- 打款回执 -->
    <el-dialog v-model="serviceShow" width="80%">
      <div class="paymentThen cardTits">
        <div class="pay-title">个体户服务费</div>
        <div class="pay-desc">共计{{totals}}人</div>
        <el-table :data="serviceArr" stripe style="width: 100%" @sort-change="sortChange1">
          <el-table-column width="30"> </el-table-column>
          <el-table-column prop="legalName" sortable="custom" label="姓名"> </el-table-column>
          <el-table-column prop="phone" sortable="custom" label="电话号码"> </el-table-column>
          <el-table-column prop="socialCreditCode" sortable="custom" width="170" label="统一社会信用代码">
          </el-table-column>
          <el-table-column prop="startTime" sortable="custom" label="结算开始时间">
             <template #default="item">
              {{ format("yyyy-MM-dd hh:mm:ss", new Date(item.row.startTime)) }}
            </template>
          </el-table-column>
          <el-table-column prop="endTime" label="结算结束时间">
            <template #default="item">
              {{ format("yyyy-MM-dd hh:mm:ss", new Date(item.row.endTime)) }}
            </template>
          </el-table-column>
          <el-table-column prop="subFee" sortable="custom" label="结算服务款"> </el-table-column>
          <el-table-column prop="receiveCardNo" sortable="custom" label="收款卡号"> </el-table-column>
          <el-table-column prop="receiveBank" sortable="custom" label="收款银行"> </el-table-column>
          <el-table-column prop="paymentStatuts" label="打款状态">
            <template #default="item">
              {{ paymentStatuts[item.row.paymentStatuts] }}
            </template>
          </el-table-column>
          <!-- <el-table-column prop="chufa" label="备注"> </el-table-column> -->
        </el-table>
        <el-pagination
          v-if="serviceArr.length > 0"
          @size-change="dakuanSizeChange"
          @current-change="dakuanCurrentChange"
          :current-page="dakuanCurrentPage"
          :page-sizes="dakuanArrPage"
          :page-size="dakuanSelectPage"
          layout="total, sizes, prev, pager, next, jumper"
          :total="dakuanTotal"
        >
        </el-pagination>
        <div class="pay-title margin-top">税费</div>
        <el-table :data="dakuanhuizhiShui" stripe style="width: 100%">
          <el-table-column width="30"> </el-table-column>
          <el-table-column prop="settlementNo" label="单号"> </el-table-column>
          <el-table-column prop="startTime" label="结算开始时间">
            <template #default="item">
              {{ format("yyyy-MM-dd hh:mm:ss", new Date(item.row.startTime)) }}
            </template>
          </el-table-column>
          <el-table-column prop="endTime" label="结算结束时间">
            <template #default="item">
              {{ format("yyyy-MM-dd hh:mm:ss", new Date(item.row.endTime)) }}
            </template>
          </el-table-column>
          <el-table-column prop="platformReceiveCardNo" label="结算卡号"> </el-table-column>
          <el-table-column prop="platformReceiveBank" label="收款银行"> </el-table-column>
          <el-table-column prop="tax" label="税费"> </el-table-column>
          <el-table-column prop="paymentStatuts" label="打款状态">
            <template #default="item">
              {{ paymentStatuts[item.row.paymentStatuts] }}
            </template>
          </el-table-column>
        </el-table>
        <div class="pay-title margin-top">服务费</div>
        <el-table :data="dakuanhuizhiShui" stripe style="width: 100%">
          <el-table-column width="30"> </el-table-column>
          <el-table-column prop="settlementNo" label="单号"> </el-table-column>
          <el-table-column prop="startTime" label="结算开始时间">
            <template #default="item">
              {{ format("yyyy-MM-dd hh:mm:ss", new Date(item.row.startTime)) }}
            </template>
          </el-table-column>
          <el-table-column prop="endTime" label="结算结束时间">
            <template #default="item">
              {{ format("yyyy-MM-dd hh:mm:ss", new Date(item.row.endTime)) }}
            </template>
          </el-table-column>
          <el-table-column prop="platformReceiveCardNo" label="结算卡号"></el-table-column>
          <el-table-column prop="platformReceiveBank" label="收款银行"></el-table-column>
          <el-table-column prop="fee" label="服务费"> </el-table-column>
          <el-table-column prop="paymentStatuts" label="打款状态">
            <template #default="item">
              {{ paymentStatuts[item.row.paymentStatuts] }}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button size="small" @click="serviceShow = false">取 消</el-button>
          <el-button size="small" type="primary" @click="serviceShow = false"
            >确 定</el-button
          >
        </span>
      </template>
    </el-dialog>


    <!-- 打款情况 -->
		<el-dialog title="打款情况" custom-class="examine-style" v-model="selectSettleListByNo" width="80%">
			<div class="cardTits">
				<el-table :data="selectSettleListByNos" stripe style="width: 100%">
					<el-table-column width="30">
					</el-table-column>
					<el-table-column prop="businessPayTime" label="企业打款时间">
             <template #default="item">
              {{ format("yyyy-MM-dd hh:mm:ss", new Date(item.row.businessPayTime)) }}
            </template>
					</el-table-column>
          <el-table-column prop="paymentStatuts" label="企业打款状态" align="center">
            <template #default="item">
              {{ paymentStatuts[item.row.paymentStatuts] }}
            </template>
					</el-table-column>
          <el-table-column prop="platformPaymetStatus" label="平台打款状态">
            <template #default="item">
              {{ platformPaymetStatus[item.row.platformPaymetStatus] }}
            </template>
					</el-table-column>
					<el-table-column prop="platformPayTime" label="平台打款时间">
             <template #default="item">
              {{ format("yyyy-MM-dd hh:mm:ss", new Date(item.row.platformPayTime)) }}
            </template>
					</el-table-column>
          <el-table-column prop="platformPaymentReceiptUrl" label="平台打款凭证" align="center" class-name="editor">
            <template #default="item">
                <template v-if="item.row.platformPaymentReceiptUrl == null"
                  >-</template
                >
                <el-button
                  v-else
                  type="text"
                  @click="openUrl(item.row.platformPaymentReceiptUrl)"
                  >查看</el-button
                >
              </template>
					</el-table-column>
					<el-table-column prop="platformPaymentDetailUrl" label="平台打款明细" align="center" class-name="editor">
            <template #default="item">
                <template v-if="item.row.platformPaymentDetailUrl == null"
                  >-</template
                >
                <el-button
                  v-else
                  type="text"
                  @click="openUrl(item.row.platformPaymentDetailUrl)"
                  >查看</el-button
                >
              </template>
					</el-table-column>
          <el-table-column prop="paymentReceiptUrl" label="企业打款凭证" align="center" class-name="editor">
            <template #default="item">
                <template v-if="item.row.paymentReceiptUrl == null"
                  >-</template
                >
                <el-button
                  v-else
                  type="text"
                  @click="openUrl(item.row.paymentReceiptUrl)"
                  >查看</el-button
                >
              </template>
					</el-table-column>
					<el-table-column prop="paymentDetailUrl" label="企业打款明细" align="center" class-name="editor">
            <template #default="item">
                <template v-if="item.row.paymentDetailUrl == null"
                  >-</template
                >
                <el-button
                  v-else
                  type="text"
                  @click="openUrl(item.row.paymentDetailUrl)"
                  >查看</el-button
                >
              </template>
					</el-table-column>
				</el-table>
			</div>
		</el-dialog>
  </div>
</template>

<script>
import axios from "axios";

export default {
  props: ["bussinessId", "platformId", "search"],
  data() {
    return {
      getRowKeys(row) {
        // 获取row的key值
        return row.id;
      },
      paymentStatuts: {
        1: "未打款",
        0: "未结算",
        2: "已打款",
        3: "废弃",
        4: "验证中"
      },
      platformPaymetStatus: {
        0: "未打款",
        1: "已打款",
      },
      settlementStatus: {
        // 结算状态
        0: "未结算",
        1: "已结算",
      },
      orderByZH: false,
      orderByAsc: false,
      orderByColume: 'createTime',
      tableData: [],
      selectSettleListByNo: false,
      selectSettleListByNos: [],
      currentPage: 1,
      settlementNo: '',
      total: 0, // 总条数
      arrPage: [10, 20], // 每页条数
      selectPage: 10, // 每页选中条数
      checkboxSelect: 0,
      totals: 0,
      serviceShow: false, // 是否显示打款回执
      serviceArr: [],
      servicePayment: [],
      dakuanCurrentPage: 1,
      dakuanTotal: 0, // 总条数
      dakuanArrPage: [10, 20], // 每页条数
      dakuanSelectPage: 10, // 每页选中条数
      dwonloadList: [], // 选中的数据
      dakuanhuizhiShui: []
    };
  },
  created() {
    this.getTableAll();
  },
  methods: {
    getTableAll() {
      if (this.bussinessId) {
        // 企业结算
        this.getBussinessTableData();
      } else if (this.platformId) {
        this.getPlatformData();
      } else {
        this.getTableData();
      }
    },
    getTableData() {
      // 获取列表信息
      this.$http({
        url: "/api/settlement/selectSettleListByNo",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          settlementNo: this.search, // 结算单号
          // businessId: "", // 个体工商户id
          // platformId: "", // 灵活用工平台id
          pageNum: this.currentPage,
          pageSize: this.selectPage,
          orderByAsc: this.orderByAsc, // 是否正序
          orderByColume: this.orderByColume, // 排序字段
          orderByZH: this.orderByZH, // 是否汉字
        },
      }).then((data) => {
        if (data.code === 0) {
          this.tableData = data.result.list;
          this.total = data.result.total;
        }
      });
    },
    getBussinessTableData() {
      // 获取企业结算列表信息
      this.$http({
        url: "/api/business/selectSettlementInfoByBusinessId",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          businessId: this.bussinessId, // 企业id
          mixedStr: "", // 灵活用工平台id
          pageNum: this.currentPage,
          pageSize: this.selectPage,
          orderByAsc: this.orderByAsc, // 是否正序
          orderByColume: this.orderByColume, // 排序字段
          orderByZH: this.orderByZH, // 是否汉字
        },
      }).then((data) => {
        if (data.code === 0) {
          this.tableData = data.result.list;
          this.total = data.result.total;
        }
      });
    },
    getPlatformData() {
      // 获取灵工平台结算列表信息
      this.$http({
        url: "/api/platform/selectSettlementInfoByPlatformId",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          platformId: this.platformId, // 企业id
          pageNum: this.currentPage,
          pageSize: this.selectPage,
          orderByAsc: this.orderByAsc, // 是否正序
          orderByColume: this.orderByColume, // 排序字段
          orderByZH: this.orderByZH, // 是否汉字
        },
      }).then((data) => {
        if (data.code === 0) {
          this.tableData = data.result.list;
          this.total = data.result.total;
        }
      });
    },
    sortChange(d) {
				// 监听排序
      if(d.prop == null) {
        // 默认排序方式
        this.orderByZH = false
        this.orderByAsc = false
        this.orderByColume = 'createTime'
      }else {
        let orderByZH = false
        if(d.prop == "businessName" || d.prop == "industyMsg" || d.prop == "platformName" || d.prop == "name") {
          orderByZH = true
        }
        this.currentPage = 1
        this.selectPage = 10
        let orderByAsc = d.order == "descending" ? false : true
        this.orderByZH = orderByZH
        this.orderByAsc = orderByAsc
        this.orderByColume = d.prop
      }
      if (this.bussinessId) {
        // 企业结算
        this.getBussinessTableData();
      } else if (this.platformId) {
        this.getPlatformData();
      } else {
        this.getTableData();
      }
    },
    sortChange1(d) {
				// 监听排序
      if(d.prop == null) {
        // 默认排序方式
        this.orderByZH = false
        this.orderByAsc = false
        this.orderByColume = 'createTime'
      }else {
        let orderByZH = false
        if(d.prop == "businessName" || d.prop == "industyMsg" || d.prop == "platformName" || d.prop == "name") {
          orderByZH = true
        }
        this.currentPage = 1
        this.selectPage = 10
        let orderByAsc = d.order == "descending" ? false : true
        this.orderByZH = orderByZH
        this.orderByAsc = orderByAsc
        this.orderByColume = d.prop
      }
      this.settlementService(this.settlementNo);
    },
    dakuanSizeChange(val) {
      // 打款回执切换每页条数调用
      this.dakuanSelectPage = val;
      this.settlementService(this.settlementNo)
    },
    dakuanCurrentChange(val) {
      // 打款回执切换当前页数调用
      this.dakuanCurrentPage = val;
      this.settlementService(this.settlementNo)
    },
    handleSelectionChange() {},
    handleSizeChange(val) {
      // 切换每页条数调用
      this.selectPage = val;
      this.getTableAll();
    },
    handleCurrentChange(val) {
      // 切换当前页数调用
      this.currentPage = val;
      this.getTableAll();
    },
    excelDownload() {
      // 下载
      let checkSelect = new FormData();
      for (let i = 0; i < this.dwonloadList.length; i++) {
        checkSelect.append("list", this.dwonloadList[i].id);
      }
      axios({
        method: "POST",
        url: "/api/settlement/settleListExcel",
        data: checkSelect,
        responseType: "blob",
        headers: {
          Authorization: localStorage.getItem("hegui_token"),
        },
      })
        .then((res) => {
          const blob = new Blob([res.data]);
          const downloadElement = document.createElement("a");
          const href = window.URL.createObjectURL(blob);
          //后台再header中传文件名
          downloadElement.href = href;
          downloadElement.download =
            "结算信息" + this.format("yyyyMMddhhmmss", new Date()) + ".xlsx";
          document.body.appendChild(downloadElement);
          downloadElement.click();
          document.body.removeChild(downloadElement); // 下载完成移除元素
          window.URL.revokeObjectURL(href); // 释放掉blob对象
        })
        .catch((err) => {
          console.log(err);
        });
    },
    downloadWhether(d) {
      this.checkboxSelect = d.length;
      this.dwonloadList = d;
    },
    cleanSelection() {
      // 清空选择
      this.$refs.multipleTable.clearSelection();
    },
    async settlementService(id) {
      // 获取个体服务费
      this.settlementNo = id;
      await this.$http({
        url: "/api/settlement/selectSettleSevicerListByNo",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          pageNum: this.dakuanCurrentPage,
          pageSize: this.dakuanSelectPage,
          businessId: "",
          settlementNo: id,
          platformId: "",
          orderByAsc: this.orderByAsc, // 是否正序
          orderByColume: this.orderByColume, // 排序字段
          orderByZH: this.orderByZH, // 是否汉字
        },
      }).then((data) => {
        if (data.code === 0) {
          this.totals = data.result.total
          this.serviceArr = data.result.list
          this.dakuanTotal = data.result.total
        }
      });

      // 税费/服务费
      await this.$http({
        url: "/api/settlement/selectSettleTaxByPlatformId",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          pageNum: 1,
          pageSize: 10,
          businessId: "",
          settlementNo: id,
          platformId: "",
          orderByAsc: this.orderByAsc, // 是否正序
          orderByColume: this.orderByColume, // 排序字段
          orderByZH: this.orderByZH, // 是否汉字
        },
      }).then((data) => {
        if (data.code === 0) {
          this.dakuanhuizhiShui = [data.result]
        }
      });
      // 打款回执
      this.serviceShow = true;
    },
    settlementServices(item){
      // 打款情况
      this.selectSettleListByNo = true;
      this.selectSettleListByNos = [item];
    },
    openUrl(url) {
      // 打开新窗口查看协议
      let newwin = window.open();
      newwin.document.write("<img src=" + url + " />");
    },
  },
};
</script>

<style scoped lang="scss">
.paymentThen {
  .pay-title {
    color: rgba(10, 46, 106, 1);
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: bold;
  }

  .pay-desc {
    color: #6c8198;
    margin-bottom: 20px;
    font-size: 12px;
  }

  .el-pagination {
    text-align: right;
  }

  .margin-top {
    margin-top: 20px;
  }
}
</style>
